<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css" />
 <script src="../../layui/layui.js"></script>
 <title>Document</title>
</head>

<body>
 <div class="layui-container">
  <div class="layui-row layui-col-space5">
   <div class="layui-col-md12">
    <fieldset class="layui-elem-field">
     <legend>徽章</legend>
     <div class="layui-field-box">
      <p>徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。</p>
      <img src="../../img/29.png" alt="">
      <p>你可能已经敏锐地发现，除去花枝招展的七种颜色，徽章具有三种不同的风格类型：小圆点、椭圆体、边框体</p>
      <p>小圆点，通过 layui-badge-dot 来定义，里面不能加文字</p>
      <span class="layui-badge-dot"></span>
      <span class="layui-badge-dot layui-bg-orange"></span>
      <span class="layui-badge-dot layui-bg-green"></span>
      <span class="layui-badge-dot layui-bg-cyan"></span>
      <span class="layui-badge-dot layui-bg-blue"></span>
      <span class="layui-badge-dot layui-bg-black"></span>
      <span class="layui-badge-dot layui-bg-gray"></span>

      <p>椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式</p>
      <span class="layui-badge">6</span>
      <span class="layui-badge">99</span>
      <span class="layui-badge">61728</span>

      <span class="layui-badge">赤</span>
      <span class="layui-badge layui-bg-orange">橙</span>
      <span class="layui-badge layui-bg-green">绿</span>
      <span class="layui-badge layui-bg-cyan">青</span>
      <span class="layui-badge layui-bg-blue">蓝</span>
      <span class="layui-badge layui-bg-black">黑</span>
      <span class="layui-badge layui-bg-gray">灰</span>

      <p>边框体，通过 layui-badge-rim 来定义</p>
      <span class="layui-badge-rim">6</span>
      <span class="layui-badge-rim">Hot</span>
     </div>
    </fieldset>

    <fieldset class="layui-elem-field">
     <legend>与其它元素的搭配</legend>
     <div class="layui-field-box">
      <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
      <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
      <hr />
      <ul class="layui-nav" style="text-align: right;">
       <!-- <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --> -->
       <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
       </li>
       <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
       </li>
      </ul>
      <hr />
      <div class="layui-tab layui-tab-brief">
       <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理<span class="layui-badge-dot"></span></li>
        <li>最新邮件<span class="layui-badge">99+</span></li>
       </ul>
       <div class="layui-tab-content"></div>
      </div>
     </div>
    </fieldset>
   </div>
  </div>

  <div class="layui-row layui-col-space5">
   <div class="layui-col-md12">
    <fieldset class="layui-elem-field">
     <legend>时间线</legend>
     <div class="layui-field-box">
      <p>徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。</p>
      <ul class="layui-timeline">
       <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
         <h3 class="layui-timeline-title">8月18日</h3>
         <p>
          layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
          <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
          <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
         </p>
        </div>
       </li>
       <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
         <h3 class="layui-timeline-title">8月16日</h3>
         <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
         <ul>
          <li>《登高》</li>
          <li>《茅屋为秋风所破歌》</li>
         </ul>
        </div>
       </li>
       <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
         <h3 class="layui-timeline-title">8月15日</h3>
         <p>
          中国人民抗日战争胜利72周年
          <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
          <br>铭记、感恩
          <br>所有为中华民族浴血奋战的英雄将士
          <br>永垂不朽
         </p>
        </div>
       </li>
       <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
        <div class="layui-timeline-content layui-text">
         <div class="layui-timeline-title">过去</div>
        </div>
       </li>
      </ul>
     </div>
    </fieldset>
   </div>
  </div>

  <div class="layui-row layui-col-space5">
   <div class="layui-col-md12">
    <fieldset class="layui-elem-field">
     <legend>辅助</legend>
     <div class="layui-field-box">
      <h4>引用区块</h4>
      <blockquote class="layui-elem-quote">引用区域的文字</blockquote>
      <blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>
     </div>
    </fieldset>

    <fieldset class="layui-elem-field">
     <legend>字段集区块</legend>
     <div class="layui-field-box">
      <p>同样内置了两种风格，另一种风格即该文档的标题横线：字段集一行</p>
      <fieldset class="layui-elem-field">
       <legend>字段集区块 - 默认风格</legend>
       <div class="layui-field-box">
        内容区域
       </div>
      </fieldset>

      <fieldset class="layui-elem-field layui-field-title">
       <legend>字段集区块 - 横线风格</legend>
       <div class="layui-field-box">
        内容区域
       </div>
      </fieldset>
     </div>
    </fieldset>

    <fieldset class="layui-elem-field">
     <legend>横线</legend>
     <div class="layui-field-box">
      默认分割线
      <hr>
      赤色分割线
      <hr class="layui-border-red">
      橙色分割线
      <hr class="layui-border-orange">
      墨绿分割线
      <hr class="layui-border-green">
      青色分割线
      <hr class="layui-border-cyan">
      蓝色分割线
      <hr class="layui-border-blue">
      黑色分割线
      <hr class="layui-border-black">
     </div>
    </fieldset>

   </div>
  </div>
 </div>
 <script>
  layui.use(['form', 'layer', 'element'], function () {
   var foprm = layui.form,
    element = layui.element;
   element.render();
  });
 </script>
</body>

</html>